<template>
  <page>
    <el-row>
      <el-col :span="24">
        <calendar-card
          v-loading="loading"
          title="实际产量展示"
          :data="dayData"
          :defaultDate="date"
          type="day"
          @day="dayChange"
        />
      </el-col>
    </el-row>
  </page>
</template>

<script>
import calendarCard from '../components/calendarCard.vue';
import { getURLParams } from '@/utils';
import { getDay } from '@/api/home';
export default {
  components: {
    calendarCard,
  },
  data() {
    return {
      loading: false,
      dayData: [],
      year: '',
      date: '',
    };
  },
  created() {
    this.init();
    this.getSummaryData(this.date);
  },
  methods: {
    init() {
      const url = location.href;
      if (url.indexOf('?') > -1) {
        const { year, month } = getURLParams(url);
        this.year = year;
        this.date = `${year}-${month}`;
      }
    },
    getCalendarData(data = {}) {
      const list = [];
      const { rate, finishNum, detail } = data;
      detail.forEach((item, index) => {
        list.push({
          text: `${item.name}`,
          type: 'month',
          count: item.val,
        });
        // 汇总和图表
        if (index === detail.length - 1) {
          list.push(
            ...[
              { type: 'summary', count: finishNum },
              { type: 'chart', count: rate },
            ]
          );
        }
      });
      return list;
    },
    getSummaryData(date) {
      this.loading = true;
      const { projectId } = this.$store.getters;
      getDay({ projectId, monthDate: date })
        .then(res => {
          const { data } = res || {};
          this.dayData = this.getCalendarData(data);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    dayChange(val) {
      this.getSummaryData(val);
    },
  },
};
</script>

<style lang="scss" scoped></style>
